import React from "react";
import {
  RouteObject,
  RouterProvider,
  createBrowserRouter,
} from "react-router-dom";
import { Suspense, lazy } from "react";
import NprogressBar from "@/componets/nprogress-bar";
import RootLayout from "@/layout/root-layout";
import { ThemeProvider } from "@/contexts/theme";
import LoginModalHost from "@/componets/loginModel";
import AgeVerificationHost from "@/componets/AgeVerificationModal";
import bgvideo from '@/assets/login/heartcloudsmall7.webm';

const Home = lazy(() => import("@/pages/home"));
const CardsList = lazy(() => import("@/pages/cards_list"));
const Mine = lazy(() => import("@/pages/mine"));
const CreateImage = lazy(() => import("@/pages/creatImages"));
const MyWork = lazy(() => import("@/pages/my_work"));// 作品历史页面的懒加载
const MyLikedPersion = lazy(() => import("@/pages/my_liked_persion"));// 我喜欢的对象页面懒加载
const MyLikedWorkList = lazy(() => import("@/pages/my_liked_workList"));// 我喜欢的作品页面懒加载
const Terms = lazy(() => import("@/pages/Terms/Terms"));// 条款页面
const TermsCollection = lazy(() => import("@/pages/Terms_Rouls/index")); // 条款集合页面
const Underage = lazy(() => import("@/pages/Terms_of_Underage/Underage")); // 未成年人条款页面
const SexTrafficking = lazy(() => import("@/pages/Terms_of_SexTrafficking/sexTrafficking"));//性贩卖条款页面
const Prohibited = lazy(() => import("@/pages/Terms_of_Prohibited/Prohibited"));//禁止内容条款页面
const ContentRemoval = lazy(() => import("@/pages/Terms_of_ContentRemoval/ContentRemoval"));//内容移除条款页面
const Aml = lazy(() => import("@/pages/Terms_of_AML/Aml"));//AML反欺诈条款页面
const ServiceTerms = lazy(() => import("@/pages/Terms_of_service/service"));//服务条款页面
const PrivacyPolicy = lazy(() => import("@/pages/Terms_of_privacyPolicy/privacyPolicy"));//隐私条款页面

// 优化的加载组件
const LoadingFallback = () => (
  <div className="flex items-center justify-center min-h-screen">
    <div className="loading-skeleton w-full max-w-md h-96 rounded-lg"></div>
  </div>
);

// 优化路由加载
const routes: RouteObject[] = [
  {
    path: "/",
    element: <RootLayout />,
    loader: async () => {
      try {
        // 移除不必要的用户信息请求，减少首屏阻塞
        return { user: null };
      } catch (error) {
        return { user: null };
      }
    },

    children: [
      { index: true, element: <Home /> }, //首页
      { path: "/cards-list", element: <CardsList /> }, //卡片列表页面
      { path: "/profile", element: <Mine /> },//我的页面
      { path: "/CreateImage", element: <CreateImage /> },//创作图片
      { path: "/my_work", element: <MyWork /> },//作品历史
      { path: "/my_liked_persion", element: <MyLikedPersion /> },//我喜欢的对象
      { path: "/my_liked_workList", element: <MyLikedWorkList /> },//我喜欢的作品
      { path: "/clause", element: <TermsCollection /> },//条款集合页面
    ],
  },
  { path: "/Terms", element: <Terms /> },//条款页面 √
  { path: "/Underage-Policy", element: <Underage /> },//未成年人条款页面
  { path: "/Sex-Trafficking-Policy", element: <SexTrafficking /> },//性贩卖条款页面
  { path: "/Prohibited-Content-Policy", element: <Prohibited /> },//禁止内容条款页面
  { path: "/Content-Removal-Policy", element: <ContentRemoval /> },//内容移除条款页面
  { path: "/AML-Anti-Fraud-Policy", element: <Aml /> },//AML反欺诈条款页面  √
  { path: "/Service-Terms", element: <ServiceTerms /> },//服务条款页面 √
  { path: "/Privacy-Policy", element: <PrivacyPolicy /> },//隐私条款页面
  { path: "/Terms-of-Service", element: <ServiceTerms /> },//服务条款页面
];

export default function App() {
  // 高优先级预加载登录模态框背景视频
  React.useEffect(() => {
    const preloadVideo = document.createElement('link');
    preloadVideo.rel = 'preload';
    preloadVideo.as = 'video';
    preloadVideo.href = bgvideo;
    preloadVideo.setAttribute('fetchpriority', 'high');
    document.head.appendChild(preloadVideo);

    // 可选：提前创建video元素进行预加载
    const video = document.createElement('video');
    video.preload = 'auto';
    video.src = bgvideo;
    video.muted = true;
    video.load();

    return () => {
      // 清理预加载链接
      if (preloadVideo.parentNode) {
        preloadVideo.parentNode.removeChild(preloadVideo);
      }
    };
  }, []);

  return (
    <ThemeProvider>
      <Suspense fallback={<LoadingFallback />}>
        <RouterProvider router={createBrowserRouter(routes)} />
        <LoginModalHost />
        <AgeVerificationHost />
        <NprogressBar />
      </Suspense>
    </ThemeProvider>
  );
}